Cards

Cards are used to apply a container around a related grouping of information.

BaseBase › DefaultBase › EmptyBasedev ready

Preview

Code

<article class="slds-card">
  <header class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
        </svg>
      </div>
      <div class="slds-media__body slds-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">Card Header</span>
          </a>
        </h2>
      </div>
    </div>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--neutral slds-col--bump-left">New</button>
    </div>
  </header>
  <div class="slds-card__body slds-text-align--center">Card Body (custom goes in here)</div>
  <div class="slds-card__footer">Card Footer</div>
</article>

Base NarrowBase Narrow › DefaultBase Narrow › EmptyBase Narrowdev ready

Preview

Code

<article class="slds-card slds-card--narrow">
  <header class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
        </svg>
      </div>
      <div class="slds-media__body slds-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">Card Header</span>
          </a>
        </h2>
      </div>
    </div>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options</span>
      </button>
    </div>
  </header>
  <div class="slds-card__body slds-text-align--center">Card Body (custom goes in here)</div>
  <div class="slds-card__footer">Card Footer</div>
</article>

The narrow card is used primarily on desktop within a “narrow” column or “sidebar”, which takes up the remaining one-third of the viewport, with a minimum width of 400px to maintain readability.

Related List With TilesRelated List With Tilesdev ready

Preview

Code

<article class="slds-card">
  <header class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
        </svg>
      </div>
      <div class="slds-media__body slds-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">Contacts (3)</span>
          </a>
        </h2>
      </div>
    </div>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--neutral slds-col--bump-left">New</button>
    </div>
  </header>
  <div class="slds-card__body">
    <div class="slds-card__body--inner slds-grid slds-wrap slds-grid--pull-padded">
      <div class="slds-tile slds-media slds-card__tile slds-col--padded slds-grow-none slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
            </svg>
            <span class="slds-assistive-text">Contact</span>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
          <div class="slds-tile__detail slds-text-body--small">
            <dl class="slds-dl--horizontal">
              <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Type">Type:</p>
              </dt>
              <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="Visit">Visit</p>
              </dd>
              <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Date">Date:</p>
              </dt>
              <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="slds-tile slds-media slds-card__tile slds-col--padded slds-grow-none slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
            </svg>
            <span class="slds-assistive-text">Contact</span>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
          <div class="slds-tile__detail slds-text-body--small">
            <dl class="slds-dl--horizontal">
              <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Type">Type:</p>
              </dt>
              <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="Visit">Visit</p>
              </dd>
              <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Date">Date:</p>
              </dt>
              <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="slds-tile slds-media slds-card__tile slds-col--padded slds-grow-none slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-icon_container">
            <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
            </svg>
            <span class="slds-assistive-text">Contact</span>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
          <div class="slds-tile__detail slds-text-body--small">
            <dl class="slds-dl--horizontal">
              <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Type">Type:</p>
              </dt>
              <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="Visit">Visit</p>
              </dd>
              <dt class="slds-dl--horizontal__label">
                <p class="slds-truncate" title="Date">Date:</p>
              </dt>
              <dd class="slds-dl--horizontal__detail slds-tile__meta">
                <p class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-card__footer"><a href="javascript:void(0);">View All <span class="slds-assistive-text">entity type</span></a></div>
</article>

Related List With TableRelated List With Tabledev ready

Preview

Code

<article class="slds-card">
  <header class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
        </svg>
      </div>
      <div class="slds-media__body slds-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">Contacts (1)</span>
          </a>
        </h2>
      </div>
    </div>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--neutral slds-col--bump-left">New</button>
    </div>
  </header>
  <div class="slds-card__body">
    <table class="slds-table slds-table--bordered slds-no-row-hover slds-table--cell-buffer">
      <thead>
        <tr class="slds-text-heading--label">
          <th scope="col">
            <div class="slds-truncate" title="Name">Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Company">Company</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Title">Title</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Email">Email</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="slds-hint-parent">
          <th scope="row">
            <div class="slds-truncate" title="Adam Choi"><a href="javascript:void(0);">Adam Choi</a></div>
          </th>
          <td>
            <div class="slds-truncate" title="Company One">Company One</div>
          </td>
          <td>
            <div class="slds-truncate" title="Director of Operations">Director of Operations</div>
          </td>
          <td>
            <div class="slds-truncate" title="adam@company.com">adam@company.com</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="slds-card__footer"><a href="javascript:void(0);">View All <span class="slds-assistive-text">entity type</span></a></div>
</article>

Related List NarrowRelated List Narrowdev ready

Preview

Code

<article class="slds-card slds-card--narrow">
  <header class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
        </svg>
      </div>
      <div class="slds-media__body slds-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">Contacts (3)</span>
          </a>
        </h2>
      </div>
    </div>
    <div class="slds-no-flex">
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Options</span>
      </button>
    </div>
  </header>
  <div class="slds-card__body">
    <div class="slds-card__body--inner">
      <div class="slds-tile">
        <h3 class="slds-truncate" title="Related Record Title 1"><a href="javascript:void(0);">Related Record Title 1</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <dl class="slds-dl--horizontal">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Type">Type:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="Visit">Visit</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Date">Date:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</p>
            </dd>
          </dl>
        </div>
      </div>
      <div class="slds-tile">
        <h3 class="slds-truncate" title="Related Record Title 2"><a href="javascript:void(0);">Related Record Title 2</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <dl class="slds-dl--horizontal">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Type">Type:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="Visit">Visit</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Date">Date:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</p>
            </dd>
          </dl>
        </div>
      </div>
      <div class="slds-tile">
        <h3 class="slds-truncate" title="Related Record Title 3"><a href="javascript:void(0);">Related Record Title 3</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <dl class="slds-dl--horizontal">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Type">Type:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="Visit">Visit</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Date">Date:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <div class="slds-card__footer"><a href="javascript:void(0);">View All <span class="slds-assistive-text">entity type</span></a></div>
</article>

Component Overview

To initialize a card, apply the .slds-card class to a containing <div>. A card is made up of three sections, a header, a body, and a footer. The card header will get the .slds-card__header class. The card body will get the .slds-card__body class. The card footer will get the .slds-card__footer class.

The card body can consume either a Data Table or a Tile.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-card
Applied to:

<div>

Outcome:

Initializes card

Required:

Required

Comments:

--

.slds-card__header
Applied to:

<div>

Outcome:

Initializes card header

Required:

Required

Comments:

--

.slds-card__body
Applied to:

<div>

Outcome:

Initializes card body

Required:

Required

Comments:

--

.slds-card__body--inner
Applied to:

Any element

Outcome:

Add spacing around inner elements of a card (e.g. a tile)

Required:

No, optional element or modifier

Comments:

--

.slds-card__footer
Applied to:

<div>

Outcome:

Initializes card footer

Required:

No, optional element or modifier

Comments:

--

.slds-card__tile
Applied to:

.slds-tile

Outcome:

Use class if card consumes any form of a tile

Required:

No, optional element or modifier

Comments:

--

.slds-card--narrow
Applied to:

.slds-card

Outcome:

Modifies styles for card in a narrow column

Required:

No, optional element or modifier

Comments:

--